<template>
  <!-- 整个商品列表 -->
  <view class="goods-list">
    <view
     v-for="(goodsItem, index) in goodsList"
      :key="index"
      @click="gotoGoodsDetail(goodsItem)">
      <my-goods :goodsItem="goodsItem"></my-goods>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        queryObj: { // 商品请求参数对象
          query: '', // 查询关键词
          cid: '', // 商品分类Id
          pagenum: 1,
          pagesize: 10
        },
        goodsList: [], // 商品列表数据
        total: 0, // 商品总数, 用来实现分页,
        // 后端没有返回图片数据时默认显示该图片
        defaultPicture: 'https://img2.baidu.com/it/u=2166732786,2149482182&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375',
        isLoading: false, // 节流阀, 防止频繁请求接口数据 | 是否正在请求数据
      };
    },

    onLoad(option) {
      // console.log(option)
      // 页面加载时获取对应的数据
      this.queryObj.query = option.query || ''
      this.queryObj.cid = option.cid || ''
      // 调用获取商品列表数据
      this.getGoodsList()
    },

    methods: {
      // 获取商品列表数据
      async getGoodsList(stopFresh) {
        this.isLoading = true
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
        this.isLoading = false
        // 只要数据请求完毕，就立即按需停止下拉刷新操作
        stopFresh && stopFresh()
        // console.log(res)
        if (res.meta.status !== 200) return uni.$showMsg()
        // if (res.meta.status === 200 && this.total === 0) return uni.$showMsg('没有数据 ~ ')
        // this.goodsList = res.message.goods
        // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
        this.goodsList = [...this.goodsList, ...res.message.goods]
        this.total = res.message.total
      },
      
      // 点击商品项跳转到详情页
      gotoGoodsDetail (item) {
        // console.log(item)
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id
        })
      }
    },
    
    // 上拉触底更新数据
    onReachBottom() {
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('数据加载完毕 ~ ')
      if (this.isLoading) return
      // 让页码值自增 +1
      this.queryObj.pagenum ++
      // 重新获取列表数据
      this.getGoodsList()
    },
    
    // 下拉刷新
    onPullDownRefresh () {
      // 重置关键数据
      this.queryObj.pagenum = 1
      this.total = 0
      this.isLoading = false
      this.goodsList = []
      // 重新发起请求，请求结束后返回数据停止刷新操作
      this.getGoodsList(() => uni.stopPullDownRefresh())
    }
  }
</script>

<style lang="scss">

</style>
